Menghilangkan Border Image atau Garis Pinggir Gambar

Garis pada pinggir gambar biasanya muncul karena pengaturan border image posting di template anda belum dihilangkan. Border image atau garis tepi gambar biasanya membuat gambar menjadi tidak ekspresif sehingga kurang memberikan tampilan yang menawan. Beberapa orang mungkin terganggu atau tidak nyaman melihat gambar pada posting mereka memiliki border atau garis tepi. Itu sebabnya garis tepi tersebut sering dihilangkan. Untuk menghilangkan garis tepi tersebut tidak sulit, mudah saja kok. Ikuti caranya berikut ini: Apa itu Harlem Shake

1. Login ke Blogger
2. Masuk ke Rancangan --> Edit HTML
3. Cari kode berikut ini:

.post-body img

4. Setelah ketemu, lihat kode tersebut, biasanya diikuti dengan kode seperti dibawah ini:

.post-body img{border:1px solid #ccc;margin:5px}

5. Ganti border anda menjadi 0 (warna merah)
6. Simpan template anda lalu lihat hasilnya.

Hilang sudah seluruh border gambar anda yang menggangu itu. Sekarang pasti lebih menyenangkan jika melihat posting artikel kita tanpa border gambar. Jika artikel ini bermanfaat silahkan berikan komentar anda.....selamat mencobanya.....

Gambar

Aplikasi Android Album Web Picasa Bisa Membuat Album Foto Hilang Selamanya

Tema diatas hanya sekedar ingin sharing aja pengalaman beberapa user yang menggunakan aplikasi Web Picasa pada hape android mereka. Saya kebetulan menulis artikel ini setelah membaca forum diskusi pada Picasa Discussions. Pengalaman teman kita ini mungkin bisa terjadi pada diri kita sendiri jadi setidaknya kita membaca untuk mengetahui pengalaman yang dia pernah alami. Kebetulan teman kita ini menggunakan aplikasi android album web picasa, dan secara tidak sengaja menghapus foto pada album tersebut. Nah ingin tahu ceritanya, berikut ini adalah pertanyaan serta jawaban teman kita pada forum diskusi di situs Picasa.

Pertanyaan: Samish
Saya menggunakan hp android. Nah kebetulan karena ingin menjaga privasi saya hapus album foto pada hp android saya. Setelah saya cek foto album picasa saya diweb ternyata telah tiada. saya tidak tau kalau album foto dari picasa sinkron dengan hp android. Saya ingin merecover kembali foto yang hilang, bisakah anda membantu...

Jawaban: Phil KL
Maaf, album yang telah anda hapus telah hilang dan tidak dapat kami kembalikan. Saya sarankan anda menggunakan Google Docs sebagai penyimpanan foto off-site. Picasa Web hanya untuk akses cepat dan berbagi foto. Tapi untuk foto milik anda yang berharga sebaiknya disimpan pada Google Docs karena masih bisa direstore jika hilang

Bagaimana dengan cerita diatas mungkin ini bisa menjadi pelajaran buat kita semua. Yah memang album picasa itu hanya tempat berbagi gambar aja. Misalnya anda memiliki foto yang ingin dipamerkan aja, namun jika foto-foto penting seperti foto kenangan, foto bisnis, dan lain sebagainya perlu disimpan ditempat yang aman atau dibuat backupnya. Selain itu anda bisa simpan di Google Docs (https://docs.google.com) karena masih bisa di recover atau direstore. Oke sekian dulu info dari saya, semoga bermanfaat.

Gambar

Cara Recover atau Restore Delete Foto Anda dari Album Picasa

Sobat blog tau tidak, kemana foto yang anda upload di blog disimpan. Jika anda belum tau, foto album tersebut akan tersimpan pada Album Web Picasa. Kalau ingin berkunjung untuk melihat album web foto dari blog anda silahkan klik link ini: https://picasaweb.google.com. Kebetulan saya memposting artikel ini supaya memberikan informasi kepada teman-teman untuk sekedar berbagi pengalaman. Jika mempunyai beberapa blog dan anda sering mengupload foto ke blog anda maka foto-foto tersebut akan tersimpan pada album web picasa di beberapa folder terpisah. Nah permasalahannya jika secara tidak sengaja anda menghapus album web blog anda, maka foto2 anda akan hilang pada blog. Saya pernah mengalami hal ini, sehingga beberapa foto saya tidak muncul diblog. Kemudian saya mencoba mencari informasi di Google bagaimana merecover album saya yang terhapus. Hasilnya ada beberapa orang yang memiliki masalah seperti saya. Mereka juga secara tidak sengaja menghapus album foto mereka namun bingung bagaimana merecover kembali. Pertanyaan ini ditulis pada halaman diskusi di situs picasa. Setelah membaca beberapa beberapa artikel berbahasa inggris pertanyaan dan jawabannya seperti ini:

Pertanyaan: Kaitlynruth
Saya telah kehilangan album foto bisnis dan personal pada blog saya karena menghapus album foto pada Web Picasa. Apa ada sesuatu yang saya bisa lakukan untuk memperoleh foto saya kembali?

Jawaban: Phil KL
Maaf album yang telah anda hapus dari picasa tidak bisa direcover atau direstore. Solusi yang anda bisa lakukan adalah mengupload ulang foto backup anda dari komputer.

Nah bagaimana dengan jawaban diatas mudah-mudahan bisa membantu pertanyaan yang ada dibenak anda. Saya sengaja membuat judul seperti diatas untuk memudahkan pencarian pertanyaan anda di Google. Jadi jangan pernah menghapus foto anda dari web album picasa. Itu sama saja dengan menghapus foto pada blog anda. Oke deh semoga artikel ini bermanfaat.

Gambar , Informasi

Cara Memasang Favicon dari Blogger Blogspot

Favicon merupakan kependekan dari “Favorite Icon “, adalah sebuah ikon berupa gambar kecil (biasanya berukuran 16 x 16 piksel, yang diasosiasikan dengan logo sebuah situs atau blog dan akan muncul pada bagian browser atau bagian bookmark. Favicon dimaksudkan untuk memudahkan mengidentifikasi sebuah situs atau blog. Memasang dan menambahkan favicon di blog akan menjadikan blog kita tampak personal dan khas. Untuk membuatnya anda tidak perlu mencari jauh-jauh karena blogger telah menambah fasilitas favicon langsung dari situsnya sendiri. Untuk membuatnya ikuti tutorial berikut:

Mengubah Ukuran Favicon
1. Ukuran favicon harus diubah menjadi 16 x 16 pikel, anda dapat mengubah ukurannya dengan menggunakan aplikasi Photoshop, CoreDrwaw atau aplikasi gambar lainnya
2. Anda dapat mengubah ukuran gambar melalui situs online di: picresize.com dan resize2mail.com

Memasang Favicon di Blog
1. Login ke Blogger
2. Pilih Rancangan--> Elemen Halaman
3. Dibawahnya ada tulisan Favicon, Klik link Edit

4. Selanjutnya akan muncul jendela baru
5. Browse gambar yang ingin ditampilkan
5. Lalu Simpan gambar tersebut.

Mudahkan membuat favicon di blogger, jadi anda tidak perlu mengotak-atik template. Semoga artikel ini bermanfaat!

Gambar

Cara Membuat Related Post dengan Thumbnails

Trik dan tips kali ini akan membahas cara membuat related post dengan thumbnails. Related Post atau Artikel Terkait digolongkan berdasarkan jenis kategori atau label pada posting kita. Artikel terkait ini akan kita letakan dibawah posting. Artikel Terkait juga akan disertai Thumbnails horizontal dan Judul Blog. Fungsi dari related post yaitu menyajikan informasi lain yang berkaitan dengan artikel yang kita baca. Saya kebetulan memperoleh widget ini dari situs Indahnya Berbagi. Jika ingin membuatnya langsung saja menuju TKP:

1. Masuk ke Rancangan ---> Klik Edit HTML
2. Centang Expand Template Widget
3. Paste kode dibawah ini diatas kode </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.2em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/relatedpostwiththumbnails.js.js' type='text/javascript'/>
</b:if>

4. Cari salah satu kode berikut ini:
<div class='post-footer-line post-footer-line-3'>
atau <p class='post-footer-line post-footer-line-3'>
5. Setelah itu letakan kode dibawah ini, dibawah salah satu kode langkah ke.4

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://amatulla83.blogspot.com' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;Related Posts&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>

6. Terakhir simpan template anda.

Semoga artikel ini bermanfaat!

Gambar , Posting , Tips dan Triks , Widget

Gambar Desain Rumah Modern Dan Minimalis

Gambar Desain Rumah Modern Dan Minimalis - Seiring dengan perkembangan Arsitektur modern, kian hari rumah minimalis atau rumah dengan desain minimalis semakin banyak peminatnya. Hal ini dikarenakan desain rumah minimalis modern merupakan desain rumah yang mengacu kepada kepraktisan, fungsi multiguna, pemanfaatan lahan / ruang secara cerdik dengan menggunakan bahan minimalis namun tetap menarik dipandang mata.

Dapat dikatakan bahwa desain rumah minimalis merupakan rumah dengan gaya arsitektur yang tetap menampilkan elemen-elemen seperlunya, sesimpel mungkin namun tetap tampak elegan (lengkapnya baca : Gambar Rumah Minimalis).

Nah buat yang sedang mencari cari desain rumah minimalis berikut ini bisa dilihat beberapa contoh rumah rumah minimalis

GAMBAR DESAIN RUMAH MINIMALIS MODERN

Itulah info mengenai gambar desain rumah minimalis modern lengkap dengan gambarnya. Mudah2an aja buat yang sedang mencari ide seputar desain rumah minimalis dapat ketemu disini. info lain : Cara mengecilkan perut buncit yang bisa di cros check dengan cara menurunkan berat badan.

Gambar , Rumah Minimalis

Kumpulan Gambar Animasi Bergerak

Kumpulan Gambar Animasi Bergerak, Gambar Animasi - Kumpulan Gambar Animasi bergerak ini berisikan Gambar-gambar animasi lucu dan gambar.gif yang biasanya suka digunakan pada presentasi menggunakan power point. Dengan menggunakan gambar bergerak atau gambar animasi tampilan presentasi jadi menarik, namun kalau terlalau banyak menggunakan gambar animasi hasilnya malah jadi berat ^_^

Gambar Animasi bisa sobat temukan dengan cara googling melalui internet, namun semoga apa yang sobat temukan disini dapat mewakili sehingga tidak perlu mencari lagi gambar animasi lainnya :)

KUMPULAN GAMBAR ANIMASI BERGERAK

Gambar Animasi yang lagi apes ..xixixixi

Gambar Animasi bergerak yang keren. Next time, kalo ada waktu akan di update lagi nich kumpulan gambar animasi bergeraknya :) Namun gimana kalau sobat baca info keren dari 4shared.com, soal ujian nasional 2012 atau download IDM Terbaru

Animasi , Animasi Bergerak , Gambar , Gambar Animasi , Joke

Thumbnail Gallery dengan efek JQuery pada Heading dan Caption

Untuk membuat blog anda lebih creative maka anda perlu membuat sesuatu yang berbeda. Kali ini Blog Trik dan Tips akan memberikan trik untuk membuat Thumbnail Gallery dengan efek JQuery pada bagian heading dan caption. Thumbnail Gallery menampilkan efek heading serta caption apabila cursor mouse anda berada diatas gambar. Untuk membuatnya sangat mudah. Ikuti saja langkah berikut ini:

1. Login ke blogger
2. Klik Rancangan -- Edit HTML
3. Centang Expand template widget
4. Masukan script berikut ini sebelum code </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script>$(document).ready(function () {

// transition effect
style = 'easeOutQuart';

// if the mouse hover the image
$('.photo').hover(
function() {
//display heading and caption
$(this).children('div:first').stop(false,true).animate({top:0},{duration:200, easing: style});
$(this).children('div:last').stop(false,true).animate({bottom:0},{duration:200, easing: style});
},

function() {
//hide heading and caption
$(this).children('div:first').stop(false,true).animate({top:-50},{duration:200, easing: style});
$(this).children('div:last').stop(false,true).animate({bottom:-50},{duration:200, easing: style});
}
);

});</script>

5. Masukan kode CSS berikut sebelum ]]></b:skin>

<!--Jquery-Thumbnail-www.blogtrikdantips.blogspot.com-BEGIN-->
.photo {
/* relative position, so that objects in it can be positioned inside this container */
position:relative;
font-family:arial;
/* hide those extra height that goes beyong the size of this container */
overflow:hidden;
border:5px solid #000;
width:350px;
height:186px;
}
.photo .heading, .photo .caption {
/* position inside the container */
position:absolute;
background:#000;
height:50px;
width:350px;
/* transparency for different browsers */
/* i have shared this in my CSS tips post too */
opacity:0.6;
filter:alpha(opacity=60);
-moz-opacity:0.6;
-khtml-opacity: 0.6;

}
.photo .heading {
/* hide it with negative value */
/* it's the height of heading class */
top:-50px;
}

.photo .caption {
/* hide it with negative value */
/* it's the height of bottom class */
bottom:-50px;
}

/* styling of the classes*/
.photo .heading span {

color:#26c3e5;
top:-50px;
font-weight:bold;
display:block;
padding:5px 0 0 10px;
}
.photo .caption span{
color:#999;
font-size:12px;
display:block;
padding:5px 10px 0 10px;
}
<!--Jquery-Thumbnail-http://blogtrikdantips.blogspot.com-END-->

6. Simpan template sobat
7. Masuk ke Rancangan -- Elemen Laman. Kemudian tambahkan gadjet lalu pilih HTML Javascript. Masukan kode dibawah ini:

<div class="photo">
<div class="heading"><span>Judul Thumbnail Gallery</span></div>
<img src="http://4.bp.blogspot.com/_kmq5S6nnKMQ/SlX3s-xJYOI/AAAAAAAAAV8/cEOKCUQoyL4/s200/konversi.jpg" width="340px" height="175" alt="" />
<div class="caption"><span>Tulislah Caption Thumbnail Gallery Disini</span></div>
</div>

Keterangan:
- Kode berwarna merah diatas adalah judul thumbnail gallery
- Kode berwarna ungu adalah gambar thumbnail gallery
- Kode berwarna hijau adalah lebar dan tinggi (ukuran) thumbnail gallery
- Kode berwarna biru adalah caption thumbnail gallery

8. Simpan gadjet sobat dan lihat hasilnya

Animasi , Gambar

Membuat Slide Show dan Caption - JQuery

Penerapan JQuery pada blog kini semakin populer, salah satunya yaitu membuat efek Slide Show dan Caption. Slide show ini akan menampilkan beberapa gambar dan caption (deskripsi singkat dari gambar tersebut. Gambar dan caption akan ditampilkan bergantian. Trik ini mudah diterapkan pada blog dan biasanya digunakan untuk menampilkan foto serta informasi yang menarik untuk dilihat oleh pengunjung. Untuk melihat demonya KLIK DISINI. Jika sobat ingin membuat Slide Show dan Caption ikuti triknya dibawah ini:

1. Login ke blogger
2. Masuk ke Rancangan -- Edit HTML
3. Centang Expand template widet
4. Masukan script dibawah ini setelah kode <head>:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
//Execute the slideShow, set 6 seconds for each images
slideShow(3000);
});
function slideShow(speed) {
//append a LI item to the UL list for displaying caption
$('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');

//Set the opacity of all images to 0
$('ul.slideshow li').css({opacity: 0.0});
//Get the first image and display it (set it to full opacity)
$('ul.slideshow li:first').css({opacity: 1.0});
//Get the caption of the first image from REL attribute and display it
$('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title'));
$('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt'));
//Display the caption
$('#slideshow-caption').css({opacity: 0.7, bottom:0});
//Call the gallery function to run the slideshow
var timer = setInterval('gallery()',speed);

//pause the slideshow on mouse over
$('ul.slideshow').hover(
function () {
clearInterval(timer);
},
function () {
timer = setInterval('gallery()',speed);
}
);
}
function gallery() {

//if no IMGs have the show class, grab the first image
var current = ($('ul.slideshow li.show')? $('ul.slideshow li.show') : $('#ul.slideshow li:first'));
//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));
//Get next image caption
var title = next.find('img').attr('title');
var desc = next.find('img').attr('alt');

//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);
//Hide the caption first, and then set and display the caption
$('#slideshow-caption').animate({bottom:-70}, 300, function () {
//Display the content
$('#slideshow-caption h3').html(title);
$('#slideshow-caption p').html(desc);
$('#slideshow-caption').animate({bottom:0}, 500);
});
//Hide the current image
current.animate({opacity: 0.0}, 1000).removeClass('show');

}
//]]>
</script>
<style type='text/css'>
ul.slideshow {
list-style:none;
width:600px;
height:240px;
overflow:hidden;
position:relative;
margin:0;
padding:0;
font-family:Arial,Helvetica,Trebuchet MS,Verdana;
;
}
ul.slideshow li {
position:absolute;
left:0;
right:0;
}
ul.slideshow li.show {
z-index:500;
}
ul img {
width:600px;
height:240px;
border:none;
}
#slideshow-caption {
width:600px;
height:70px;
position:absolute;
bottom:0;
left:0;
color:#fff;
background:#000;
z-index:500;
}
#slideshow-caption .slideshow-caption-container {
padding:5px 10px;
z-index:1000;
}
#slideshow-caption h3 {
margin:0;
padding:0;
font-size:16px;
}
#slideshow-caption p {
margin:5px 0 0 0;
padding:0;
}
</style>

Keterangan: kode berwarna merad adalah tinggi dan lebar slideshow dan caption, sobat dapat sesuaikan atau merubahnya sesuai dengan ukuran image yang ingin ditampilkan.

5. Simpan Template sobat
6. Masukan kode berikut ini pada gadjet sobat, caranya masuk ke Rancangan --Elemen Laman, tambahkan gadjet lalu pilih HTML/Javascript

<ul class="slideshow">
<li><a href="http://blogtrikdantips.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4BHyp3YMN_Bz8N8OTTBRWFa_AbGFamJQW_DRa9Bmq2-5mBA4a9OB3teSfofoycuOVDZ65bCjufUl6BYUjvnrfeAQstUbmMRYvtiuDkfgYNyAqGBt0Te15OgNRY91lxNg3VQmQURcRnAM/s1600/1.jpg" title="This is featured post 1 title" alt="Replace This Text With Your Featured Post 1 Description." /></a></li>

<li><a href="http://blogtrikdantips.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMdxmoiHcEAFIveDVvksd8OZ3zO3qYN_LxhaXzUdg3OovozdniT1BUzr-fnj2RwEZhqne1onNi4JGyNJuxLB_AHy3MuXdS_5K0MKaF18Q3b-xp42xcIQfQdhF1XNdsOqduTpIXcucTSGg/s1600/2.jpg" title="This is featured post 2 title" alt="Replace This Text With Your Featured Post 2 Description." /></a></li>

<li><a href="http://blogtrikdantips.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOBVOwl0VnQWecJ8RTnM6GitHw7WO4AoVNHv5s78SCKbL5O-Id8IoSHjFhKcoxWfT7V17qCvCcLj-00iZ-aau6lLbvGjtdkY8G79s0j8_Qv3irUdW9g4M0GcKHuzpu9sq2__J9Up5R0xI/s1600/3.jpg" title="This is featured post 3 title" alt="Replace This Text With Your Featured Post 3 Description." /></a></li>

<li><a href="http://blogtrikdantips.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHhVHTuUm08lSks5Qe-gwJk2fT_c35L6jwraaXY1qL3Z6PAxS030Sogdzr33QjEqyIAH7lutz2jDkKwr3xHHuTEz_9jzfrMr4tOvg-LESR1kEi0KLXq_QMuFAhJUVG3t1kk0KWrPL4rCQ/s1600/4.jpg" title="This is featured post 4 title" alt="Replace This Text With Your Featured Post 4 Description." /></a></li>
</ul>

Keterangan: Ubahlah alamat url, url gambar, dan caption diatas sesuai keinginan sobat

7. Simpan gadjet dan lihat hasilnya

Animasi , Gambar

Membuat Slide Iklan atau Slide Foto pada Blog

Pengen punya slide iklan atau slide foto gallery? Anda dapat menampilkan beberapa jenis iklan dalam bentuk slide yang akan bergerak. Iklan akan ditampilkan bergantian dan akan berhenti ketika cursor mouse berada tepat diatas iklan tersebut. Trik ini sedikit rumit buat blogger yang masih newbie. Berikut ini saya akan berikan langkah-langkah cara membuat slide iklan tersebut:

1. Login ke blogger
2. Masuk ke Rancangn -- Edit HTML
3. Jangan lupa untuk memback up template sobat
4. Centang Expand Widget Template
5. Cari kode ini ]]></b:skin>
6. Letakan kode dibawah ini diatas kode ]]></b:skin>

.carousel{
float:left;
margin: 0;
padding:0px;
}

.carousel .widget {
width: 720px;
background:#c4d5ec;
margin: 0;
padding:0;
}

.carousel h2{
display:none;
}
.stepcarousel{
position: relative;
overflow: scroll;
width: 765px;
height: 160px;
}

.stepcarousel .belt{
position: absolute;
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left;
overflow: hidden;
margin: 5px 20px 5px 0px;
width: 140px;
}

.stepcarousel .panel img{
float: left;
background:#940f04;
margin: 5px;
padding:5px;
border:1px solid #ccc;
}

.stepcarousel .panel img:hover{
background:#ffffff;
}
.quickedit{display:none}

#under_header{
opacity: 100;

}

Keterangan:
- Kode berwarna biru diatas adalah ukuran slide iklan atau carousel. Soabt dapat sesuaikan dengan lebar sidebar apabila ditempatkan pada area tersebut.

7. Letakan kode dibawah ini dibawah kode ]]></b:skin>

<script src='http://blogtrikdantips-blogspot.googlecode.com/files/slide_gallery1.js' type='text/javascript'/>
<script src='http://blogtrikdantips-blogspot.googlecode.com/files/slide_gallery2.js' type='text/javascript'/>

8. Simpan template sobat

Selanjutnya kita akan menambahkan widget slide gallery tersebut pada elemen halaman atau pada pada sidebar blog sobat

1. Masuk ke Rancangan -- Elemen Laman
2. Tambah gadjetkan lalu pilih HTML/Javascript
3. Masukan kode dibawah ini pada gadjet tersebut

<script type="text/javascript">
stepcarousel.setup({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs panelclass: 'panel', //class of panel DIVs each holding content autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:false, persist:true},
defaultbuttons: {enable: true, moveby: 1, leftnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirqPntXgk2_sjP4nipa3mKOd7OqqDLhFxC5j7HM0EUV5jVn8v-7fcyUisNDMtdkkclXarapgS3xcLp3CJqs9f9rLKneLzEOASh6TuMsroDGW9g5Sx51bHd5bymHCiQn7p3UO3w1j6Xcjqb/', 30, 60 ], rightnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi06j5_20j7JHD-QLS5G990_QICSqjAyHN4MclGdTle66IWgG099Iq1jePJg_v7Np7bmX80WFcjPwWLT63LugaDdJyCVckIfHt0pptZYPxD_Dj8EvjE2SSUtUyA0mMP_OrdJ0we0c4nGfqR/', -55, 60 ]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['inline'] //content setting ['inline'] or ['external', 'path_to_external_file']
})
</script>
<div id="mygallery" class="stepcarousel">
<div class="belt">

<div class="panel">
<a href="URL LINK ANDA">
<img src="URL GAMBAR ANDA" width="100px" height="135px" title="KLIK DI SINI" /></a>
</div>

<div class="panel">
<a href="URL LINK ANDA">
<img src="URL GAMBAR ANDA" width="100px" height="135px" title="KLIK DI SINI" /></a>
</div>

<div class="panel">
<a href="URL LINK ANDA">
<img src="URL GAMBAR ANDA" width="100px" height="135px" title="KLIK DI SINI" /></a>
</div>

<div class="panel">
<a href="URL LINK ANDA">
<img src="URL GAMBAR ANDA" width="100px" height="135px" title="KLIK DI SINI" /></a>
</div>

<div class="panel">
<a href="URL LINK ANDA">
<img src="URL GAMBAR ANDA" width="100px" height="135px" title="KLIK DI SINI" /></a>
</div>

<div class="panel">
<a href="URL LINK ANDA">
<img src="URL GAMBAR ANDA" width="100px" height="135px" title="KLIK DI SINI" /></a>
</div>

<div class="panel">
<a href="URL LINK ANDA">
<img src="URL GAMBAR ANDA" width="100px" height="135px" title="KLIK DI SINI" /></a>
</div>

Keterangan:
- Kode berwarna merah adalah url gambar iklan pada slide
- Kode berwarna hijau adalah url link iklan pada slide

4. Simpan gadjet sobat dan lihat hasilnya!

Adsense , Animasi , Gambar

Kelebihan Shareapic untuk Sharing dan Hosting Gambar

Shareapic merupakan situs yang menyediakan tempat bagi anda untuk mengupload gambar, berbagi sekaligus memperoleh penghasilan tambahan. Shareapic adalah layanan yang memungkinkan penggunanya untuk meng-upload foto ke server Shareapic. Yang membuat Shareapic berbeda dari file hosting gambar lainnya yaitu shareapic memberikan penghasilan bagi pengguna yang mengarahkan teman dan keluarga mereka untuk melihat foto yang anda upload.

Anda dapat mengupload gambar sebanyak-banyaknya tanpa batas. Selain itu anda dapat membuat galeri dan anda pun akan dibayar $0,22 per 1000 gambar yang dilihat. Penghasilkan tersebut cukup banyak jika dibandingkan dengan beberapa program afiliasi yang membayar publisernya. Shareapic akan membayar anda setelah 30 hari permintaan. Ketika penghasilan anda telah mencapai 20$ maka anda dapat meminta untuk dibayar. Shareapic akan membayar anda melalui PayPal.

Gambar yang kamu upload harus memenuhi syarat yang ditentukan oleh pihak shareapic yaitu tidak mengandung unsur pornografi, kekerasan, gambar yang dilindungi oleh hukum dan undang-undang. Sebelum album gambarmu mempunyai status PUBLIC dan dapat dilihat oleh masyarakat luas, terlebih dahulu gambar-gambarmu diseleksi oleh pihak Shareapic. Apabila gambar-gambarmu memenuhi syarat maka album gambarmu akan disetujui.

Apabila gambar yang kamu upload mengandung hal-hal yang dilarang oleh Shareapic seperti yang telah saya sebutkan di atas, maka albummu tidak akan disetujui dan akunmu bisa diblokir. Tidak ada biaya yang diperlukan untuk mendaftar ke Shareapic. Selain itu tidak ada upgrade akun dan pembayaran di kemudian hari. Semuanya gratis! Mari mendaftar di www.shareapic.net

Adsense , Gambar

Cara Membuat Efek Zoom Gambar pada Postingan

Trik yang satu ini pasti anda tidak akan lewatkan karena kali ini kita akan membuat efek zoom pada gambar. Gambar akan diperbesar apabila cursor anda berada diatasnya. Trik ini mungkin jarang digunakan, namun jika blog anda memiliki beragam animasi dan gambar tentunya trik ini perlu dicoba. Kali ini blog trik dan tips akan memberikan tutorial cara membuat efek zoom gambar pada postingan. Jika sobat mau tau gimana cara membuatnya ikuti langkahnya dibawah ini:

1. Login ke blogger
2. Masuk ke Rancangan -- Edit HTML
3. Cari kode ini ]]></b:skin>
4. Paste kode dibawah ini diatas kode ]]></b:skin>

.post img:hover {
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transform: scale(1.3);
-o-transform: scale(1.3);
-webkit-transform: scale(1.3); }

5. Simpanlah template sobat

Tiap kali anda mengarahkan cursor mouse pada gambar di dalam posting blog maka animasi zoom akan muncul. Selamat mencoba trik diatas, good luck!!

Gambar , Tips dan Triks

Menampilkan Icon Bergambar Sebelum Judul Posting

Blogging adalah salah satu aktivitas menulis atau berbagi informasi untuk tujuan komersil, personal dan lain sebagainya. Bentuk informasi yang disajikan juga beragam tergantung dari tujuan penulis blog tersebut. Untuk itu sangat penting bagi sobat dalam menjaga penampilan blog agar terlihat lebih menarik. Kebetulan pada kesempatan ini saya akan berbagi trik untuk membuat tampilan blog anda lebih menarik. Kali ini kita akan menambahkan icon sebelum judul posting blog. Jika sobat ingin tau caranya ikuti langkah dibawah ini:

1. Carilah gambar yang anda ingin tampilkan.
2. Atur ukuran gambar sehingga ukurannya 50 x 50 pixel, kemudian upload file gambar ke file hosting kalian dan kopi url link gambar.
3. Masukkan url link gambar sobat dikode berwarna merah dibawah ini:

<img src="URL-LINK-GAMBAR" style="border-width: 0px;" />

3. Login ke blogger
4. Masuk ke Rancangan -- Edit HTML, kemudian centang Expand Widget Template.
5. Carilah kode berikut ini <b:if cond='data:post.url'>
6. Letakkan kode HTML yang anda kopi tadi diatas kode <b:if cond='data:post.url'> sehingga terlihat seperti ini

<img src="http://www.blogger.com/LINK%20TO%20YOUR%20IMAGE%20HERE" style="border-width: 0px;" />

<b:if cond='data:post.url'>

7. Simpanlah template anda.

Kini sobat dapat melihat icon bergambar sebelum judul posting. Selamat mencoba dan good luck!!!

Gambar , Tips dan Triks

Membuat Recent Post dengan Gambar atau Thumbnails

Sobat mungkin sedang mencari artikel mengenai trik untuk membuat recent post atau posting terbaru dengan thumbnail (gambar). Kebetulan pada kesempatan ini blog trik dan tips akan memberikan tutorial tersebut. Recent post yang akan kita buat akan membuat penampilan blog lebih menarik. Gambar yang muncul adalah gambar yang berasal dari posting sobat dan gambar tersebut ditampilkan secara otomatis. Jika sobat sudah tidak sabaran ikuti langkahnya dibawah ini:

1. Login ke blogger.
2. Masuk ke Rancangan -- Elemen Laman
3. Tambahkan gadjet lalu pilih HTML/JavaScript
4. Masukkan kode dibawah ini:

<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 298;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#000000";
thumbwidth = 25;
thumbheight = 25;
fntsize = 11;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 4;
home_page = "http://blogtrikdantips.blogspot.com/";
</script>
<script src="http://blogtrikdantips-blogspot.googlecode.com/files/recentposts_thumbnail.js" type="text/javascript"></script>

Keterangan:
- numposts = 4; Jumlah posting yang ingin ditampilkan
- thumbwidth = 25; ukuran lebar gambar
- thumbheight = 25; ukuran tinggi gambar

5. Ganti http://blogtrikdantips.blogspot.com/ dengan url blog anda
6. Simpanlah template anda dan selamat mencoba!!!

Gambar , Tips dan Triks

Cara Membuat Readmore dengan Gambar

Kita sebelumnya telah belajar fungsi dari readmore yang mana adalah untuk memperpendek posting pada home page anda. Kali ini ada trik yang ingin saya bagikan yaitu mengubah teks readmore dengan gambar. Secara otomatis apabila anda memposting maka gambar readmore akan nampak pada home page. Jika sobat ingin tau caranya ikuti langkahnya berikut ini:

1. Login ke blogger
2. Masuk ke Rancangan -- Edit HTML
3. Klik Expand Template Widget
4. Cari kode ini </head>
5. Kopi kode dibawah ini dan paste dibawah kode diatas:

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://blogtrikdantips-blogspot.googlecode.com/files/read-moreotomatis.js' type='text/javascript'/>

Keterangan :
summary_noimg = 430; adalah jumlah karakter yang akan ditampilkan tanpa gambar
summary_img = 340; adalah jumlah karakter yang akan ditampilkan dengan gambar
img_thumb_height = 100; adalah ukuran tinggi gambar
img_thumb_width = 120; adalah lebar gambar

6. Carilah kode <data:post.body/>
7. Hapus kode diatas dan ganti dengan kode dibawah ini:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'><img src="http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif"></img></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Keterangan:
Kode berwarna merah diatas adalah gambar atau teks yang ingin ditampilkan pada readmore. Untuk contoh gambar sobat dapat lihat dibawah ini:

http://i785.photobucket.com/albums/yy131/djnand/Button_ReadMore_Reflective.jpg
http://i785.photobucket.com/albums/yy131/djnand/but_moreinfoorange.gif
http://i785.photobucket.com/albums/yy131/djnand/readMorehitam.png
http://1.bp.blogspot.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif%27

8. Simpan template sobat

Gambar

Cara Mengganti Background Blog dengan Gambar

Apakah sobat bosan dengan latar belakang atau background blog saat ini? Jangan tunggu lagi segera gantikan warnanya! Selain sobat dapat mengganti background dengan warna lain misalnya biru, hijau dll, sobat juga dapat mengantinya dengan gambar yang menarik. Sobat dapat berkunjung ke situs ini untuk melihat gambar background blog yang cocok untuk gaya blog sobat: Da Background Labs. Untuk memulai mengganti background ikuti saja langkah berikut ini:

1. Login ke blogger.
2. Masuk ke Rancangan -- Edit HTML
3. Jangan lupa backup template anda
4. Carilah kode CSS seperti dibawah ini

/* ------ navbar ------------- */
#navbar-iframe {display:none!important}
body{background:#ECECEC url(http://1.bp.blogspot.com/-dwhd6gmYsYI/T44HSYoz9bI/AAAAAAAADCs/qvfAAyUHep0/s400/background.jpg) scroll 0 0;

Keterangan:
- Kode diatas (body{background) adalah latar belakang blog sobat
- Kode berwarna biru adalah gambar latar belakang, sobat dapat gantikan dengan gambar yang sobat sukai
- Jika sobat ingin menggantikan latar belakang blog dengan warna cukup hapus saja kode url gambar diatas, lalu gantikan kode berwarna merah dengan warna latar belakang yang sobat sukai.

5. Simpan template sobat

Sekarang sobat tinggal lihat hasilnya. Good Luck dan Selamat mencoba!

Gambar

Cara Membuat Rotating Banner

Jika sobat memiliki beberapa banner dan bermasalah dengan ruang blog yang sempit maka ada cara yang mudah untuk menampilkan semua banner dengan menggunakan trik rotating banner. Rotating banner akan membuat banner pada header blog anda untuk berotasi setiap kali halaman tersebut di reload. Rotating banner ini akan berhasil diterapkan pada image banner bukan teks banner. Mau tau caranya, ikuti aja trik berikut ini:

1. Login ke blogger.
2. Pilih Rancangan dan Klik Edit HTML
3. Letakkan script dibawah ini setelah kode ]]></b:skin>

<script type="text/javascript">
var banner= new Array()

banner[0]="http://static.flickr.com/84/269053449_acad87a793_o.jpg"
banner[1]="http://static.flickr.com/95/269053438_4ef5a3983e_o.jpg"
banner[2]="http://static.flickr.com/96/269053404_44a3b0eda8_o.jpg"
banner[3]="http://static.flickr.com/108/269053262_608edbdda4_o.jpg"

var random=Math.round(4*Math.random());
document.write("<style>");
document.write("#header {");
document.write(' background:url("' + banner[random] + '") no-repeat left TOP;');
document.write(" }");
document.write("</style>");
</script>

Keterangan:
- Sobat tinggal ganti url banner/gambar yang ingin ditampilkan (kode berwarna biru)
- Jika sobat ingin menambah banner tinggal tambahkan script dibawah ini:
banner[4]="http://static.flickr.com/98/269053232_6f7c6f994a_o.jpg"
banner[5]="http://static.flickr.com/98/269053232_6f7c6f994a_o.jpg"
Kemudian ganti kode berwarna hijau diatas dengan jumlah banner yang ditampilkan, misalnya 5 banner, maka hasilnya seperti ini:
Math.round(5*Math.random());

4. Simpan template anda dan lihat hasilnya
Selamat mencoba!!!!

Gambar

Cara Membuat iFrame pada Blog

FRAME....dari istilahnya kita semua sudah tau bahwa frame adalah bingkai. Namun bingkai atau frame dalam terminology HTML berbeda maksudnya..Mungkin sobat pernah mendengar istilah Frame dan iFrame. Frame adalah sebuah kotak yang memiliki setting full ke satu browser yang terdiri dari beberapa kotak sedangkan iframe adalah sebuah kotak pada frame itu sendiri yang menunjukan halaman tertentu.

Beberapa atribut atau kode yang digunakan dalam membuat iframe yaitu
- ALIGN ="left/right" --> Untuk mengatur posisi iframe
- WIDTH ="lebar" -->: Mengatur lebar IFRAME dalam pixel atau persen
- HEIGHT ="tinggi" --> Untuk mengatur tinggi dari iframe dalam pixel atau persen
- FRAMEBORDER ="garis pembatas" --> Untuk memberi garis pembatas
- SCROLLING ="auto/yes/no" --> Untuk memberi atau tidak memberi scrolling pada
iframe
- SRC ="url yg ingin di tampilkan" --> alamat sumber yang ingin di tampilkan pada
iframe

Kali ini kita akan membuat iframe pada blog, cara membuatnya sangat simpel. Berikut ini saya akan membuat iframe untuk blog saya sendiri....http://blogtrikdantips.blogspot.com/

Kodenya seperti ini:

<iframe align="left" frameborder="5" src="http://blogtrikdantips.blogspot.com/" width="500" height="300" scrolling="auto"> </iframe>

iFramenya akan terlihat seperti ini. Selamat mencoba....!!!

Gambar

Menghilangkan Tang dan Obeng pada Blog

Waktu itu salah seorang sobat sempat bertanya kepada saya..."sob cara hilangin gambar tang dan obeng itu bagaimana sih? Jawab aku: ini dia bro tutorialnya! Tang dan obeng pada tampilan blog anda berfungsi untuk melakukan pengeditan gadjet tanpa harus masuk ke Rancangan blog. Tang dan obeng tersebut muncul ketika anda sedang login pada akun anda. Tapi jika anda merasa terganggu dengan keberadaan gambar ini maka anda dapat menghapusnya...Pengen tau caranya gimana hilangin tang dan obeng, ikuti langkah berikut ini:

1. Login ke blogger
2. Masuk ke Rancangan, klik pada Edit HTML
3. Cari kode ini ]]></b:skin>
4. Kopi dan paste kode dibawah ini tepat diatas kode ini ]]></b:skin>

.quickedit{
display:none;
}

5. Simpan template anda dan lihat hasilnya....
Selamat mencoba....happy blogging

Gambar

Membuat Tanda Tangan Pada Posting Blog

Anda ingin memberikan sedikit sentuhan pada blog. Sentuhan ? Maksud saya sentuhan tangan alias tanda tangan. Beberapa blogger membuat tanda tangan pada bagian bawah posting agar kelihatan lebih menarik. Tanda tangan ini akan muncul pada setiap posting tentunya.

Anda pun bisa membuatnya, karena caranya mudah. Untuk itu ikuti saja langkah berikut jika anda tertarik membuatnya. Marilah mencoba!

1. Kunjungi situs dibawah ini dan buatlah tanda tangan secara online
a. My live signature
b. 123 Pimpin

2. Setelah membuat tanda tangan tersebut upload gambar anda pada photobucket, atau file hosting lainnya
3. Kopilah kode gambar tersebut
4. Masuk ke Pengaturan pada blog anda
5. Klik Format pada pengaturan
6. Dibagian paling bawah paste kode gambar tadi pada kotak template posting
7. Cobalah untuk terbitkan sebuah posting, dan lihat hasilnya

Selain itu ada cara lainnya untuk memunculkan gambar tersebut pada semua posting. Caranya sebagai berikut:
1. Masuk ke Rancangan -- Edit HTML
2. Centang Expand template widget
3. Carilah kode <data:post.body/>
4. Letakkan kode berikut ini dibawah kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<--KODE GAMBAR-->
</b:if>

5. Hapus kode berwarna biru lalu gantikan dengan kode gambar (tanda tangan)
6. Simpan template anda lalu lihat hasilnya

Gambar